<template>
  <div class="modules">
    <van-nav-bar
        title="菜单栏"
    />
<!--    <div class="columnTit">-->
<!--        <span>待办事项</span>-->
<!--    </div>-->
    <van-grid :column-num="3">
        <van-grid-item v-for="moduleItem in modules.db" :key="moduleItem.tit" :icon="moduleItem.icon" :text="moduleItem.tit" @click="toModule(moduleItem.tit)"/>
    </van-grid>
    <van-popup v-model="ifShow_P" position="bottom">
      <van-picker
        title="项目"
        show-toolbar
        :columns="projectList"
        @confirm="onConfirm"
        @change="onChange"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Notify } from 'vant'

export default {
  name: 'Module',
  data () {
    return {
      ifShow_P: false,
      modules: {
        db: [
          {tit: '丹能销售订单', icon: require('../assets/salesOrder.png')},
          {tit: '拓天销售订单', icon: require('../assets/salesOrder.png')},
          {tit: '丹能库存查询', icon: require('../assets/stockQuery.png')},
          {tit: '拓天库存查询', icon: require('../assets/stockQuery.png')},
          {tit: '丹能每日发货', icon: require('../assets/fahuo.png')},
          {tit: '拓天每日发货', icon: require('../assets/fahuo.png')},
          {tit: '丹能销售出库', icon: require('../assets/salesOut.png')},
          {tit: '拓天销售出库', icon: require('../assets/salesOut.png')},
        ],
      }
    }
  },
  computed: {
    ...mapState({
      projectList: state => state.app.projectList,
      curProjectName: state => state.app.curProjectName,
      wechatType: state => state.app.wechatType
    })
  },
  created () {
    if (this.wechatType === '0') {
      this.modules.wd.splice(5, 1)
    }
  },
  components: {
  },
  methods: {
    onChange () { // picker, value, index
    },
    ...mapActions([
      'SetProject'
    ]),
    toModule (type) {
      switch (type) {
        case '丹能销售订单':
          this.$router.push({name: 'dnSalesOrderList'})
          break;
        case '拓天销售订单':
          this.$router.push({name: 'ttSalesOrderList'})
          break;
        case '丹能库存查询':
          this.$router.push({name: 'dnStockQuery'})
          break;
        case '拓天库存查询':
          this.$router.push({name: 'ttStockQuery'})
          break;
        case '丹能每日发货':
          this.$router.push({name: 'dnDailyShipmentList'})
          break;
        case '拓天每日发货':
          this.$router.push({name: 'ttDailyShipmentList'})
          break;
        case '丹能销售出库':
          this.$router.push({name: 'dnSalesOutOrder'})
          break;
        case '拓天销售出库':
          this.$router.push({name: 'ttSalesOutOrder'})
          break;
      }
    },
    onCancel () {
      this.ifShow_P = false
    },
    onConfirm (value) {
      this.ifShow_P = false
      this.SetProject({id: value.code, name: value.text})
      Notify({ type: 'success', message: '项目切换成功！' })
    }
  }
}
</script>

<style scoped>
.modules{
  background: #ffffff;
}
.columnTit{
    padding: 0 5px;
    height: 30px;
    text-align: left;
}
.columnTit span::before{
    content: '';
    width: 4px;
    height: 20px;
    display: inline-block;
    position: relative;
    top: 3px;
    background: #57a3f3;
    margin-right: 6px;
    border-radius: 2px;
}
.columnTit span{
    height: 30px;
    line-height: 30px;
    display: inline-block;
    /* border-left: 4px solid blue;
    padding-left: 6px;
    text-align: left; */
}
</style>
